<template>
  <div>
    <!-- 面包屑内容 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/course/video'}">课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 视频列表 -->
    <el-card>
      <el-table
          :data="videoList"
          border
          style="width:100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column
            prop="title"
            label="课程名称"
            width="300px">
        </el-table-column>
        <el-table-column
            prop="cover_img"
            label="课程封面"
            width="110px">
          <template slot-scope="scope">
            <img :src="scope.row.cover_img" style="height: 60px"/>
          </template>
        </el-table-column>
        <el-table-column
            :formatter="formatPrice"
            prop="price"
            label="价格"
            width="130px">
        </el-table-column>
        <el-table-column
            prop="point"
            label="评分"
            width="130px">
        </el-table-column>
        <el-table-column
            prop="create_time"
            label="上架时间">
        </el-table-column>
        <el-table-column
            prop="level"
            label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" size='mini'  @click="editCourselist(scope.row)">编辑</el-button>
            <el-button type="danger" size='mini'  @click="removeCourse(scope.row.id)">删除</el-button>
            <el-button type="info" size='mini' @click="detail(scope.row.id)">章节详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          align="left"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 编辑课程diaolog对话框 -->
    <el-dialog align="left" title="修改课程" :visible.sync="editCourseVisible" width="50%" >
      <!--主体部分 -->
      <el-form label-width="150px"
               :model="courseInfo">

        <el-form-item label="课程标题" prop="title" style="width: 700px;">
          <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"
                    size="medium" />
        </el-form-item>

        <el-form-item label="推荐分值" prop="point" style="width: 300px;" inline="true">
          <el-input v-model="courseInfo.point" size="medium"/>
        </el-form-item>

        <el-form-item label="课程价格" prop="price" style="width: 300px">
          <el-input v-model="courseInfo.price" size="medium" />
        </el-form-item>

        <!-- 课程封面-->
        <el-form-item label="课程封面" prop="cover_img" style="width: 300px">
          <el-upload
              action="http://localhost:8089/api/v1/pub/video/uploadImg"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              v-model="courseInfo.cover_img"
              :limit=1
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="上架时间"  prop="create_time">
          <el-col :span="3">
            <el-date-picker
                v-model="courseInfo.create_time"
                type="datetime"
                placeholder="选择日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      		<el-button @click="editCourseVisible = false" >取 消</el-button>
      		<el-button type="primary" @click="editCourse" >确 定</el-button>
      	</span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      videoList: [],
      cover_img: [],
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
        total: 0
      },
      total: 0,
      //修改课程参数
      courseInfo:{
        title: '',
        cover_img: '',
        price: '',
        point: '',
        create_time: '',
        id:''
      },
      //修改课程dialog,控制显示隐藏
      editCourseVisible: false,
      dialogImageUrl: '',
      dialogVisible: false,
    }
  },
  methods: {
    //删除课程
    removeCourse(id){
      this.$http.delete(`api/v1/pub/video/${id}`).then((res) => {
        console.log(res);
        if(res.data.code!==0) return this.$message.error("删除失败");
        this.$message.success("删除已选课程成功");
        //刷新列表
        this.getVideoList();
      });
    },
    //点击确定发送请求修改课程
    editCourse(){
      this.$http.put("api/v1/pub/video/editCourse",this.courseInfo).then(res=>{
        // console.log(res);
        if(res.data.code!==0) return this.$message.error("修改课程基本信息失败");
        this.$message.success("修改课程基本信息成功");
        this.getVideoList();
        this.editCourseVisible = !this.editCourseVisible;
      })
    },
    //编辑课程事件
    editCourselist(item){
      this.editCourseVisible = !this.editCourseVisible;

      this.courseInfo={

        title:item.title,
        price: item.price,
        point: item.point,
        cover_img: item.cover_img,
        create_time: item.create_time,
        id: item.id
      }
    },
    //处理价格显示
    formatPrice(value){
      //金额转换 分->元 保留2位小数 并每隔3位用逗号分开 1,234.56
      var str = (value.price/100).toFixed(2) + '';
      var intSum = str.substring(0,str.indexOf(".")).replace( /\B(?=(?:\d{3})+$)/g, ',' );//取到整数部分
      var dot = str.substring(str.length,str.indexOf("."))//取到小数部分搜索
      var ret = intSum + dot;
      return ret;
    },
    //获取视频
    getVideoList() {
      this.$http.get("api/v1/pub/video/videoPageInfo", {
        params: this.queryInfo,
      }).then(res => {
        console.log(res);
        this.videoList = res.data.list;
        this.total = res.data.total;
        for (let i = 0; i < this.videoList.length; i++) {
          this.cover_img[i] = this.videoList[i].cover_img;
        }
      })
    },

    //章节详情
    detail(id) {
      this.$router.push({path: '/course/ChapterAndEpisode/' + id})
    },
    //每页数据条数改变时触发
    SizeChange(newval) {
      this.queryInfo.pagesize = newval;
      this.getVideoList();
    },
    //当前页面改变时触发
    CurrentChange(newval) {
      this.queryInfo.pagenum = newval;
      this.getVideoList();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;

    },
    handleSuccess(response){
      this.courseInfo.cover_img=response.data;
    }
  },
  mounted() {
    this.getVideoList();
  },
}
</script>

<style>

</style>